<template>
  <div class="box-right">
    <div class="recommend-job" v-loading="loading">
      <div class="header">
        <div class="title">正在热招的岗位</div>
        <div class="more" @click="handleCheckMore">更多岗位 ></div>
      </div>
      <!-- 这两种情况返回的数据字段不一样，所以要用这种方式 -->
      <template v-if="comId">
        <div class="recommend-job-list" v-if="positionList.length">
          <div
            class="job-item"
            v-for="(item, index) in positionList"
            :key="index"
            @click="toJobDetail(item, false)"
          >
            <div class="job-name">
              <el-tooltip
                effect="light"
                :content="item.positionName"
                placement="left-end"
              >
                <span class="name" :title="item.positionName">{{
                  item.positionName || ''
                }}</span>
              </el-tooltip>
              <span class="salary">{{
                formatSalary(item.salaryDown, item.salaryUp)
              }}</span>
            </div>
            <div class="company-treatment">
              <span class="treatment line">{{ item.region || '-' }}</span>
              <span class="treatment line">{{ item.eduName || '-' }}</span>
              <span class="treatment">{{ item.workExp || '-' }}</span>
            </div>
          </div>
        </div>
      </template>
      <template v-if="companyId">
        <div class="recommend-job-list" v-if="positionList.length">
          <div
            class="job-item"
            v-for="item in positionList"
            :key="item.id"
            @click="toJobDetail(item, true)"
          >
            <div class="job-name">
              <el-tooltip
                effect="light"
                :content="item.jtzw"
                placement="left-end"
              >
                <span class="name">{{ item.jtzw || '' }}</span>
              </el-tooltip>
              <span class="salary">{{ item.xzdy_new || '' }}</span>
            </div>
            <div class="company-treatment">
              <span class="treatment line">{{ item.regionname || '-' }}</span>
              <span class="treatment line">{{ item.edus || '-' }}</span>
              <span class="treatment">{{ item.gznum || '-' }}</span>
            </div>
          </div>
        </div>
      </template>
      <el-empty
        description="暂无数据"
        v-if="!positionList.length && !loading"
      ></el-empty>
      <div class="check-more-btn" @click="handleCheckMore">查看全部岗位</div>
    </div>
    <div
      class="hr-list-container"
      v-loading="recruitLoading"
      v-if="recruitPersonList.length"
    >
      <div class="header">
        <div class="title">该公司的招聘HR</div>
      </div>
      <div class="hr-list" v-if="recruitPersonList.length">
        <div class="hr-item" v-for="item in recruitPersonList" :key="item.id">
          <div class="avatar-box">
            <img :src="item.pic || company" class="avatar" />
          </div>
          <div class="hr-info">
            <div class="hr-name">
              <div class="name line spe">{{ item.iname || '-' }}</div>
              <div class="name">{{ item.pnames || '-' }}</div>
            </div>
            <el-tooltip
              effect="light"
              :content="item.jobName"
              placement="left-end"
            >
              <div class="recruit-jobs">正在招聘{{ item.jobName || '' }}等</div>
            </el-tooltip>
          </div>
        </div>
      </div>
      <el-empty
        description="暂无数据"
        v-if="!recruitPersonList.length && !recruitLoading"
      ></el-empty>
      <div class="check-more-btn" @click="handleCheckMore">查看全部岗位</div>
    </div>
  </div>
</template>

<script>
import { getCompanyCareerJobs, getCompanyJobs } from '@/api/job-detail';
import company from '@/assets/images/png/company.png';
export default {
  name: 'RightSideList',
  props: {
    recruitPersonList: {
      type: Array,
      default: () => []
    },
    recruitLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      company,
      positionList: [],
      comId: '',
      companyId: ''
    };
  },
  created() {
    this.comId = this.$route.query.comId;
    this.companyId = this.$route.query.companyId;
    this.getData();
  },
  methods: {
    toJobDetail(item, flag) {
      let path;
      if (!flag) {
        const jobDetail = {
          employerRequirements: item.positionDemand,
          cname: item.comName,
          trade: item.industry,
          yuangong: item.comScale,
          jtzw: item.positionName,
          regionid_name: item.region,
          edus: item.eduName,
          rctypes: item.workExp,
          xzdy: `${item.salaryDown}-${item.salaryUp}元/月`,
          id: item.ylPositionId,
          activeTime: item.publishTime
        };
        localStorage.setItem('jobDetail', JSON.stringify(jobDetail));
        path = `/job-detail?comId=${item.comId}&isShowQRCode=false`;
      } else {
        path = `/job-detail?companyId=${item.companyId}&zp_id=${item.id}`;
      }
      let routeData = this.$router.resolve({ path });
      window.open(routeData.href, '_blank');
    },
    formatSalary(down, up) {
      if (down && up) {
        return (
          Math.floor(down / 1000) + '-' + Math.floor(up / 1000) + 'k' + '/月'
        );
      } else {
        return '面议';
      }
    },
    handleCheckMore() {
      this.$emit('checkMore');
    },
    getData() {
      this.loading = true;
      // 分两种情况
      // comId: 职业详情中的职业机会列表 => 岗位详情 => 这里
      // companyId: 校招岗位列表 => 岗位详情 => 这里
      const params = {
        pageNo: 1,
        pageSize: 6
      };
      if (this.comId) {
        params.id = this.comId;
      } else {
        params.companyId = this.companyId;
      }
      const fn = this.comId ? getCompanyCareerJobs : getCompanyJobs;
      fn(params)
        .then((res) => {
          if (res.code == 200) {
            this.positionList = res.data;
          } else {
            this.$message.error(res.status_desc);
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss">
.box-right {
  width: 280px;
  margin-left: 12px;
  .info-box {
    overflow: hidden;
    background: #fff;
    border-radius: 8px 0px 0px 8px;
    .info-title {
      padding: 16px;
      background: linear-gradient(
        175deg,
        #e7fff5 0%,
        rgba(255, 255, 255, 0) 80%
      );
      font-weight: 800;
      font-size: 16px;
      color: #222222;
    }
  }
  .recommend-job {
    overflow: hidden;
    background: #fff;
    border-radius: 8px 0px 0px 8px;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 8px 0px 0px 0px;
      padding: 16px;
      background: linear-gradient(
        175deg,
        #e7fff5 0%,
        rgba(255, 255, 255, 0) 80%
      );
      margin-bottom: 8px;
      .title {
        font-weight: 800;
        font-size: 16px;
        color: #222222;
      }
      .more {
        font-size: 14px;
        color: #999999;
        cursor: pointer;
      }
    }
    .recommend-job-list {
      padding: 0 0 0 16px;
      .job-item {
        margin-bottom: 21px;
        margin-right: 16px;
        cursor: pointer;
        &:last-child {
          margin-bottom: 18px;
        }
        .job-name {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          .name {
            width: 145px;
            font-size: 14px;
            color: #333333;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          .salary {
            font-weight: 600;
            font-size: 14px;
            color: #d5413d;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .company-treatment {
          display: flex;
          align-items: center;
          .treatment {
            font-size: 12px;
            color: #a2a5b3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 0 10px;
            &:first-child {
              padding-left: 0;
            }
          }
          .line {
            position: relative;
            &:after {
              content: '';
              position: absolute;
              top: 50%;
              right: 0;
              width: 1px;
              height: 11px;
              background: #cccfd7;
              transform: translateY(-50%);
            }
          }
        }
      }
    }
    .check-more-btn {
      margin: 0 18px 18px 18px;
      font-size: 15px;
      color: #4880ff;
      height: 38px;
      line-height: 36px;
      text-align: center;
      background: rgba(72, 128, 255, 0.05);
      border-radius: 8px;
      border: 1px solid #4880ff;
      cursor: pointer;
    }
  }
  .hr-list-container {
    overflow: hidden;
    background: #fff;
    border-radius: 8px 0px 0px 8px;
    margin-top: 12px;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 8px 0px 0px 0px;
      padding: 16px;
      background: linear-gradient(
        175deg,
        #e7fff5 0%,
        rgba(255, 255, 255, 0) 80%
      );
      margin-bottom: 8px;
      .title {
        font-weight: 800;
        font-size: 16px;
        color: #222222;
      }
    }
    .hr-list {
      padding: 0 16px 16px 16px;
      .hr-item {
        display: flex;
        margin: 0 0 25px 0;
        cursor: pointer;
        &:last-child {
          margin-bottom: 18px;
        }
        .avatar-box {
          flex-shrink: 0;
          width: 28px;
          height: 28px;
          margin-right: 13px;
          .avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .hr-info {
          width: calc(100% - 56px);
          .hr-name {
            margin-bottom: 5px;
            display: flex;
            .name {
              padding: 0 10px;
              &:first-child {
                padding-left: 0;
              }
            }
            .spe {
              max-width: 100px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            .line {
              position: relative;
              &:after {
                content: '';
                position: absolute;
                top: 50%;
                right: 0;
                width: 1px;
                height: 11px;
                background: #cccfd7;
                transform: translateY(-50%);
              }
            }
          }
          .recruit-jobs {
            width: 180px;
            font-size: 12px;
            color: #a2a5b3;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }
      }
    }
    .check-more-btn {
      margin: 0 18px 18px 18px;
      font-size: 15px;
      color: #4880ff;
      height: 38px;
      line-height: 36px;
      text-align: center;
      background: rgba(72, 128, 255, 0.05);
      border-radius: 8px;
      border: 1px solid #4880ff;
      cursor: pointer;
    }
  }
}
</style>
